import React from 'react';
import { Button, Row, Col, Input } from 'antd';
import ProjectList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import ProjectAdd from './add';
import SearchBar from '../../../components/SearchBar';

class ProjectIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'project';
    this.addComponent = ProjectAdd;
    this.editComponent = ProjectAdd;
    this.listsComponent = ProjectList;
    this.model_width = 500;
  }
  componentDidMount() {
    this.freshQueryList();
  }

  getSearchList = () => {
    return [
      {
        name: 'name',
        component: <Input placeholder='项目名称' />,
      },
      {
        name: 'code',
        component: <Input placeholder='项目CODE' />,
      },
      {
        name: 'createBy',
        component: <Input placeholder='创建人' />,
      },
      {
        name: 'updateBy',
        component: <Input placeholder='修改人' />,
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.freshQueryList}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content'>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6} style={{ textAlign: 'middle' }}>
              <Button type='primary' onClick={this.add.bind(this, { title: '创建项目' })}>
                创建项目
              </Button>
            </Col>
          </Row>
          <ListsComponent
            {...this.state}
            showDetail={this.showDetail}
            edit={this.edit}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
            rowKey='code'
            scroll={{ x: true }}
            history={this.props.history}
          />
        </div>
      </div>
    );
  }
}

export default ProjectIndex;
